<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户数据列表</title>
    <!--    引入vue-->
    <script type="text/javascript" src="js/vue.js"></script>
    <!--引入element ui-->
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <!--引入axios-->
    <script type="text/javascript" src="js/axios.min.js"></script>

</head>
<body>
<div id="app">
    <div>
        <el-table
                :data="datalist"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码">
            </el-table-column>
            <el-table-column
                    width="200"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="updateById(scope.row)" round>修改</el-button>
                    <el-button type="success" @click="delById(scope.row)" round>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form ref="form" :model="formData" label-width="80px">
            <el-form-item label="姓名">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="formData.age"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="formData.password"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </el-form-item>

        </el-form>

    </el-dialog>

</div>
<script>

    let app = new Vue({
        el: '#app',
        //变量区
        data() {
            return {
                //表格数据
                datalist: [],
                // 弹出层状态
                dialogVisible: false,
                //创建form表单数据
                formData: {}
            }
        },
        //页面创建完成后调用的方法
        created() {
            this.getAll()
        },
        //方法区
        methods: {
            //获取所有数据
            getAll() {
                axios.get("http://localhost:8080/test?m=findAll").then(res => {
                    //log
                    console.log("前段获取的数据: ", res)
                    this.datalist = res.data
                    console.log(this.datalist)
                }).catch(err => {
                    console.log(err)
                })
            },
            //修改方法
            updateById(row) {
                console.log("修改调用:", row)
                //显示对话框（弹出层）
                this.formData = row
                this.dialogVisible = true
            },
            //提交方法
            async onSubmit() {
                //log
                console.log("表单数据: ", this.formData)
                //发送表单
                await axios.post('http://localhost:8080/test?m=updateById', this.formData)
                    .then(res => {
                        console.log("提交结果", res)
                    }).catch(err => {
                    console.log(err)
                })
                //刷新数据
                this.getAll()
                //关闭弹出层
                this.dialogVisible = false
            },
            // 弹出层关闭之前 执行方法
            handleClose() {
                //将表单数据清空
                this.formData = {}
                //关闭弹出层
                this.dialogVisible = false
            },
            //删除方法
            delById(row) {
                console.log("修改调用:", row)
            }
        },
    })
</script>


</body>
</html>